'use client'
import {
  Layout,
  Menu,
  Button,
  theme,
  Avatar,
  Space,
  Dropdown,
  Badge
} from 'antd'
import {
  MenuFoldOutlined,
  MenuUnfoldOutlined,
  UploadOutlined,
  UserOutlined,
  VideoCameraOutlined,
  HomeOutlined,
  ShopOutlined,
  DeploymentUnitOutlined,
  TagsOutlined,
  DatabaseOutlined,
  SafetyOutlined,
  InboxOutlined,
  SearchOutlined,
  BellOutlined,
  EnvironmentOutlined,
  DownOutlined,
  QuestionCircleOutlined,
  ContainerOutlined
} from '@ant-design/icons'
import React, { useState } from 'react'
import { useRouter } from 'next/navigation'
const { Header, Footer, Sider, Content } = Layout

export default function ({ children }) {
  const [collapsed, setCollapsed] = useState(false)
  const [themeColor, setThemeColor] = useState('#3961F3')
  const [siteTitle, setSiteTitle] = useState('智慧营销平台')
  const router = useRouter()
  return (
    <Layout style={{ height: '100vh' }}>
      <Sider
        trigger={null}
        collapsible
        collapsed={collapsed}
        style={{ backgroundColor: themeColor }}
      >
        <div className="logo">{siteTitle}</div>
        <Menu
          mode="inline"
          style={{ backgroundColor: themeColor, color: '#FFF' }}
          defaultSelectedKeys={['/admin']}
          onClick={({ key }) => {
            router.push(key)
          }}
          items={[
            {
              key: '/admin',
              icon: <HomeOutlined />,
              label: '首页'
            },
            {
              key: '2',
              icon: <InboxOutlined />,
              label: '商家管理',
              children: [
                {
                  key: '/admin/seller/verify',
                  label: '商家审核'
                },
                {
                  key: '/admin/seller/list',
                  label: '商家列表'
                }
              ]
            },
            {
              key: '3',
              icon: <ShopOutlined />,
              label: '店铺管理'
            },
            {
              key: '4',
              icon: <DeploymentUnitOutlined />,
              label: '内容管理'
            },
            {
              key: '5',
              icon: <UserOutlined />,
              label: '用户管理'
            },
            {
              key: '6',
              icon: <EnvironmentOutlined />,
              label: '营销管理'
            },
            {
              key: '7',
              icon: <SafetyOutlined />,
              label: '触达管理'
            },
            {
              key: '8',
              icon: <TagsOutlined />,
              label: '标签管理'
            },
            {
              key: '9',
              icon: <ContainerOutlined />,
              label: '权限管理'
            },
            {
              key: '10',
              icon: <DatabaseOutlined />,
              label: '数据统计'
            }
          ]}
        />
      </Sider>
      <Layout>
        <Header
          style={{
            padding: 0,
            backgroundColor: '#FFF',
            display: 'flex',
            justifyContent: 'space-between',
            paddingRight: 24,
            alignItems: 'center'
          }}
        >
          <Button
            type="text"
            icon={collapsed ? <MenuUnfoldOutlined /> : <MenuFoldOutlined />}
            onClick={() => {
              setCollapsed(!collapsed)
              collapsed ? setSiteTitle('智慧营销平台') : setSiteTitle('LBS')
            }}
            style={{
              fontSize: '16px',
              width: 64,
              height: 64
            }}
          />
          <div
            style={{
              display: 'flex',
              alignItems: 'center'
            }}
          >
            <Space size={'middle'} style={{ fontSize: 16, marginRight: 16 }}>
              <SearchOutlined />
              <Badge dot>
                <BellOutlined />
              </Badge>
              <QuestionCircleOutlined />
            </Space>
            <Dropdown
              menu={{
                items: [
                  {
                    label: (
                      <span onClick={() => router.replace('/')}>退出</span>
                    ),
                    key: '0'
                  }
                ]
              }}
            >
              <a onClick={(e) => e.preventDefault()}>
                <Avatar
                  style={{ backgroundColor: '#87d068', marginRight: 10 }}
                  icon={<UserOutlined />}
                />
                <Space>
                  用户名
                  <DownOutlined style={{ fontSize: 10, color: '#999' }} />
                </Space>
              </a>
            </Dropdown>
          </div>
        </Header>
        <Content>{children}</Content>
      </Layout>
    </Layout>
  )
}
